<template>
  <div
    :style="{ height: 'calc(60vh - 60px)', width: '100%'}"
    ref="charts"
  ></div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
const axios = require('axios')
require('echarts/lib/chart/map')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
import { VisualMapComponent } from 'echarts/components';


import 'echarts-gl';
import { Scatter3DChart } from 'echarts-gl/charts';
import { Grid3DComponent } from 'echarts-gl/components';

echarts.use([Scatter3DChart, Grid3DComponent]);
echarts.use([VisualMapComponent]);
import shengfen from "@/assets/china.json"; //地图包
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data(){
    return {
      chart: null
    }
  },
  computed: {
    scrollerHeight: function () {
      return document.documentElement.clientHeight - 20 + "px"; //自定义高度
    },
    scrollerWeight: function () {
      return document.documentElement.clientWeight - 550 + "px"; //自定义宽度
    },
  },
  created() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  mounted(){
    window.onresize =  () => {
      this.chart.resize();
    };
  },
  methods: {
    initCharts() {
      let _this = this
      _this.chart = echarts.init(this.$refs["charts"]);
      let airData = [
        { name: "北京市", value: 1 },
        { name: "天津市", value: 2 },
        { name: "河北省", value: 5 },
        { name: "山西省", value: 7 },
        { name: "内蒙古自治区", value: 10 },
        { name: "辽宁省", value: 12 },
        { name: "吉林省", value: 15 },
        { name: "黑龙江省", value: 18 },
        { name: "上海市", value: 20 },
        { name: "江苏省", value: 22 },
        { name: "浙江省", value: 25 },
        { name: "安徽省", value: 30 },
        { name: "福建省", value: 34 },
        { name: "江西省", value: 96 },
        { name: "山东省", value: 92 },
        { name: "河南省", value: 13 },
        { name: "湖北省", value: 27 },
        { name: "湖南省", value: 17 },
        { name: "广东省", value: 38 },
        { name: "广西省", value: 59 },
        { name: "海南省", value: 54 },
        { name: "重庆省", value: 66 },
        { name: "四川省", value: 8 },
        { name: "贵州省", value: 1 },
        { name: "云南省", value: 25 },
        { name: "西藏省", value: 24 },
        { name: "陕西省", value: 25 },
        { name: "甘肃省", value: 19 },
        { name: "青海省", value: 17 },
        { name: "宁夏省", value: 52 },
        { name: "新疆省", value: 10 },
        { name: "台湾省", value: 8 },
        { name: "新疆维吾尔自治区", value: 8 },
        { name: "西藏自治区", value: 8 },
        { name: "宁夏回族自治区", value: 8 },
        { name: "重庆市", value: 8 },
        { name: "广西壮族自治区", value: 8 },
        { name: "南海诸岛", value: 8 },
      ];
      const option = {
        // 背景颜色
        backgroundColor: "#fff",
        
        visualMap: {
          //分段型视觉映射组件
          show: true,
          // lt:小于; lte:小于等于; gt:大于; gte:大于等于;
          pieces: [
            {
              lt: 5,
              label: "<5ms",
              color: "#83CBAC",
            },
            {
              gte: 5,
              lte: 10,
              label: "5-10ms",
              color: "#55BB8A",
            },
            {
              gt: 10,
              lte: 15,
              label: "10-15ms",
              color: "#20A162",
            },
            {
              gt: 15,
              lte: 20,
              label: "15-20ms",
              color: "#9ABEFA",
            },
            {
              gt: 20,
              lte: 30,
              label: "20-30ms",
              color: "#78A9F9",
            },
            {
              gt: 30,
              label: ">30ms",
              color: "#5693F7",
            },
          ],
        },
        // 地图配置
        geo3D: {
            map: 'china',
            roam: true,
            itemStyle: {
                areaColor: '#ccc',
                opacity: 1,
                borderWidth: 0.8,
                borderColor: 'rgb(62,215,213)'
            },
            label: {
                show: true,
                textStyle: {
                  borderWidth: 0,           // 文字的描边宽度。
                  borderColor: '#fff',      // 文字的描边颜色。
                  color: '#fff',            // 文字颜色
                  fontSize: 12,             // 文字大小
                  fontFamily: 'sans-serif', // 文字的字体系列。
                  fontWeight: 'normal',     // 文字字体的粗细。
                }
            },
            emphasis: { 
              //当鼠标放上去  地区区域是否显示名称
              label: {
                distance :10,
                show: true,           // 是否显示高亮
                textStyle: {
                  color: '#000',      // 高亮文字颜色
                  fontSize: 3,        // 文字的字体大小
                }
              },
              itemStyle: {
                color: 'red'    // 地图高亮颜色
              }
            },
            regions: [
              {
                  name: "广东",
                  itemStyle: {
                  // 隐藏地图
                      opacity: 1, // 为 0 时不绘制该图形
                  },
                  label: {
                  show: false // 隐藏文字
                  }
              }
              ],
            light: {
                main: {
                    color: '#fff', //光照颜色
                    intensity: 1.2, //光照强度
                    shadowQuality: 'high', //阴影亮度
                    shadow: false, //是否显示阴影
                    //                        alpha: 55,
                    beta: 10

                },
                ambient: {
                    intensity: 0.3
                }
            }
        },
        series: [
          {
            selectedMode: false, //取消地图区域点击事件
            geoIndex: 0, //将数据和第0个geo配置关联在一起
            type: "map3D",
            
            map:'china',
            data: airData,
          },
        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap("china", shengfen);
      _this.chart.setOption(option);
      _this.chart.on("mouseover",  () => {
        //取消鼠标移入地图区域高亮
        _this.chart.dispatchAction({
          type: "legendUnSelect",
        });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
